<script type="text/javascript">
function removePost(){	
	var del_ID = document.getElementById("delID").value;

	var f = document.createElement("form");
	f.setAttribute('method',"post");
	f.setAttribute('action',"/posts/delete/" + del_ID);
	f.submit();

	//alert(del_ID);
	/* var r = confirm("Do you really want to delete it");
	if(r){
		var f = document.createElement("form");
		f.setAttribute('method',"post");
		f.setAttribute('action',"/posts/delete/" + id);
		f.submit();
	}	 */
}

$(document).on("click", ".btnDel", function () {	
    var delID = $(this).data('id');
    $(".modal-body #delID").val( delID );
});
</script>

<script>
$(function(){
    $more=$('#more');
    $text_default=$more.text();
    $start=parseInt($more.attr('datastart'));
    $rows=10;
    $more.click(function(){
        if(!$(this).hasClass('clicked')){
            //localtion.reload();
            
        	$(this).addClass('clicked').text('Loading....');
            $page=Math.ceil($start/$rows)+1;
            $.post(
                '/search/process',
                {start:$start},
                function(data){
                    if(data){
                        //$('table tbody').append(data);
                        $("#container-fluid").append(data);
                        $more.removeClass('clicked').text($text_default).attr({
                            'href':'?p='+$page
                        });
                        pageurl = $more.attr('href');
 			            window.history.pushState({path:pageurl},'',pageurl);
                        //$('html, body').animate({scrollTop:$go_to},800);
                        $start+=$rows;
                    }else{
                        $more.remove();
                    }
                }
            );
        }
        $.post(
                '/search/process',
                {start:$start+10},
                function(data){
                    if(!data){
                        $more.remove();
                    }
                }
        );
        return false;
    });
});
</script>
<!-- Title page -->
<div class="page-header">
	<h1>
		<font color="blue">Home page</font>
	</h1>
</div>


	<div id="container-fluid">
            <?php foreach ($posts as $post): ?>
            	<div class="row" style=" background-color: #D8D8D8;border: 1.5px solid; border-color:#2E2E2E; -webkit-border-top-left-radius: 50px;-webkit-border-bottom-right-radius: 50px;-moz-border-radius-topleft: 50px;-moz-border-radius-bottomright: 50px;border-top-left-radius: 50px;border-bottom-right-radius: 50px; width: 820px">
            		<div class="col-xs-6 col-md-3" style="height: 480px; width: 150px; background-color: #2E2E2E;-webkit-border-top-left-radius: 45px;-moz-border-radius-topleft: 45px;border-top-left-radius: 45px;">
	
	                </div> 
					<div class="col-xs-12 col-md-8" style="height: 480px; width: 665px; wid-webkit-border-bottom-right-radius: 50px;-moz-border-radius-bottomright: 50px;border-bottom-right-radius: 50px;">
						<h1>
							<a href="/posts/view/<?php echo $post['Post']['id'];?>"><?php if(strlen($post['Post']['title']) > 28) echo substr($post['Post']['title'], 0,28)."...."; else echo $post['Post']['title']; ?></a>
						</h1>
						<div class="postCreated" align="left" style="background-color: #E0ECF8">
							<small> by: <?php echo $post ['Post'] ['Username']; ?></small> 
							<small> - at: <?php echo $post['Post']['created'];?></small>
						</div>
						<hr />
						<div style="text-align: center;">
							<img
								src="<?php if($post['Post']['thumbnail']) echo $post['Post']['thumbnail']; else echo "https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRkD8GfRhPJIMIEl6MHDVSzTwrsTybrTm6LphA9WP6ylF8eFN3a_Q";?>"
								class="img-thumbnail" style="max-height: 200px; max-width: 200px;">
						</div>
						<p class="lead"><?php echo $post['Post']['body'];?>....</p>
						<div>
						<a href="/posts/view/<?php echo $post['Post']['id'];?>">Continues
							reading ...</a>
						<hr />
					</div>   
                </div>
                
                </div>
                <div class="row" style="height: 5px"></div>	
            <?php endforeach;?>
    </div>
	<button id="more" style="cursor: pointer;" class="btn btn-info	"
		datastart="<?php echo $p*10;?>">Read more ...</button>